<script setup>
import * as mapvthree from "mapv-three";
import { onMounted } from "vue";

const center = [116.39151, 39.89329];
let map = null;
let engine = null;

function initMap() {
  // 初始化百度地图（需要引入地图jsapi）
  map = new BMapGL.Map("map_container");
  map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
  map.enableScrollWheelZoom();

  // 初始化 mapvthree 引擎(第一个参数为地图实例或DOM)
  engine = new mapvthree.Engine(map, {
    rendering: {
      enableAnimationLoop: true,
    },
  });
  engine.map.setCenter(center);
  engine.map.setPitch(60);
}
function randomPoints(center, radius, amount) {
  var features = [];
  for (var i = 0; i < amount; i++) {
    features.push({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [
          center[0] + radius * (Math.random() - 0.5) * 6,
          center[1] + radius * (Math.random() - 0.5) * 2,
          (center[2] || 0) + radius * Math.random()*100,
        ],
      },
      properties: { count: 10 * Math.random() },
    });
  }
  console.log(features);
  return features;
}
async function hotMap() {
  const heatmap = engine.add(
    new mapvthree.Heatmap3D({
      opacity: 0.8,
      radius: 200, // 热力绘制半径
      maxValue: 10, // 最大热力值
      heightRatio: 200, // 高度系数
      attenuateMValueFactor: 0.9, //径向渐变速度
    })
  );
  
  const dataSource = await mapvthree.GeoJSONDataSource.fromGeoJSON(
    randomPoints(center, 0.02, 1500)
  );
  dataSource.setAttribute("count");
  heatmap.dataSource = dataSource;
}

async function draw() {
  // 添加其他
  const pillar = engine.add(
    new mapvthree.Pillar({
      height: 300,
      radius: 50,
      radialSegments: 32,
    })
  );
  let data = await mapvthree.GeoJSONDataSource.fromGeoJSON([
    {
      properties: {},
      geometry: {
        type: "Point",
        coordinates: center,
      },
    },
  ]);
  pillar.dataSource = data;

  // engine.event.bind("click", (e) => {
  //   data.add(new mapvthree.DataItem(e.point));
  // });
}
onMounted(() => {
  initMap();
  // draw();
  hotMap();
});
</script>

<template>
  <main id="map_container"></main>
</template>

<style>
#map_container {
  width: 100%;
  height: 100%;
}
</style>
